<script setup>
import PageContainer from '@/components/container/PageContainer.vue'
// import { useRouter } from 'vue-router'
import NewRecord from '@/views/scheme_design/components/NewRecord.vue'

import { ref, onMounted, watch } from 'vue'

import {
  patientGetPatientInfoService,
  patientGetPatientHistoryService,
  patientGetPatientSystemicDisease,
  patientUpdatePatientClassifyAPI
} from '@/api/patient'
import {
  planGetRecordInfoService,
  planDeleteRecordService,
  planGetMouthImagesService,
  planAddRecordService
} from '@/api/designPlan'

import { planGetTreatmentPlanService } from '@/api/treatmentPlan.js'

import UpdatePatientInfoDrawer from '@/views/scheme_design/components/UpdatePatientInfoDrawer.vue'
import ExistRecord from '@/views/scheme_design/components/ExistRecord.vue'
import PatientClassifySelect from '@/components/select/PatientClassifySelect.vue'

// 导入路由
import { useRouter } from 'vue-router'

const router = useRouter()

// let tabIndex = 2
const editableTabsValue = ref('2')

// 记录列表
const recordList = ref([])

// 患者信息
const patientInfo = ref({})

// 当前标签页的记录信息
const currentRecord = ref(null)
const defalutRecord = {
  mainComplaint: '',
  currentHistory: ''
}

// 当前标签页的name
const currentTabName = ref('')

// 患者病史
const patientHistory = ref('')
// 默认的患者病史
const defaultDiseaseHistory = {
  pastHistory: '',
  personalHistory: '',
  familyHistory: ''
}

// 治疗计划
const treatmentPlanData = ref(null)

// 全身状况记录
const systemicDisease = ref(null)
// 默认的全身状况记录
const defaultSystemicDiseaseRecord = {
  isShowSymptom: '0',
  // 高血压
  highBloodPressure: '0',
  highBloodPressureIndicate: '',
  isHighBloodPressureMedication: '0',
  highBloodPressureMedication: '',
  // 糖尿病
  diabetes: '0',
  diabetesIndicate: '',
  isDiabetesMedication: '0',
  diabetesMedication: '',
  // 冠心病
  coronaryHeartDisease: '0',
  coronaryHeartDiseaseIndicate: '',
  isCoronaryHeartDiseaseMedication: '0',
  coronaryHeartDiseaseMedication: '',
  // 脑血管疾病
  cerebrovascularDisease: '0',
  cerebrovascularDiseaseIndicate: '',
  isCerebrovascularDiseaseMedication: '0',
  cerebrovascularDiseaseMedication: '',
  // 动脉粥样硬化
  atherosclerosis: '0',
  atherosclerosisIndicate: '',
  isAtherosclerosisMedication: '0',
  atherosclerosisMedication: '',
  // 肺部疾病
  lungDisease: '0',
  lungDiseaseIndicate: '',
  isLungDiseaseMedication: '0',
  lungDiseaseMedication: '',
  // 胃肠道病
  gastrointestinalDisease: '0',
  gastrointestinalDiseaseIndicate: '',
  isGastrointestinalDiseaseMedication: '0',
  gastrointestinalDiseaseMedication: '',
  // 类风湿性关节炎
  rheumatoidArthritis: '0',
  rheumatoidArthritisIndicate: '',
  isRheumatoidArthritisMedication: '0',
  rheumatoidArthritisMedication: '',
  // 骨质疏松
  osteoporosis: '0',
  osteoporosisIndicate: '',
  isOsteoporosisMedication: '0',
  osteoporosisMedication: '',
  // 血液病
  hemopathy: '0',
  hemopathyIndicate: '',
  isHemopathyMedication: '0',
  hemopathyMedication: '',
  // 肝胆病
  hepatobiliaryDisease: '0',
  hepatobiliaryDiseaseIndicate: '',
  isHepatobiliaryDiseaseMedication: '0',
  hepatobiliaryDiseaseMedication: '',
  // 其他疾病
  otherDisease: '0',
  otherDiseaseIndicate: '',
  isOtherDiseaseMedication: '0',
  otherDiseaseMedication: '',
  // 心脑血管手术
  cardiacCerebrovascularSurgery: '0',
  cardiacCerebrovascularSurgeryIndicate: '',
  isCardiacCerebrovascularSurgeryMedication: '0',
  cardiacCerebrovascularSurgeryMedication: '',
  // 关节、瓣膜置换手术
  jointValveReplacementSurgery: '0',
  jointValveReplacementSurgeryIndicate: '',
  isJointValveReplacementSurgeryMedication: '0',
  jointValveReplacementSurgeryMedication: '',
  // 器官移植手术
  organTransplantSurgery: '0',
  organTransplantSurgeryIndicate: '',
  isOrganTransplantSurgeryMedication: '0',
  organTransplantSurgeryMedication: '',
  // 其他手术
  otherSurgery: '0',
  otherSurgeryIndicate: '',
  isOtherSurgeryMedication: '0',
  otherSurgeryMedication: '',
  // 妊娠期
  gestationPeriod: '0',
  gestationPeriodIndicate: '',
  isGestationPeriodMedication: '0',
  gestationPeriodMedication: '',
  // 直系亲属牙周炎病史
  immediateFamilyPeriodontitisHistory: '0',
  immediateFamilyPeriodontitisHistoryIndicate: '',
  isImmediateFamilyPeriodontitisHistoryMedication: '0',
  immediateFamilyPeriodontitisHistoryMedication: '',
  // 吸烟
  smoking: '0',
  smokingIndicate: '',
  isSmokingMedication: '0',
  smokingMedication: '',
  // 焦虑、神经紧张、压力
  anxietyNervousnessStress: '0',
  anxietyNervousnessStressIndicate: '',
  isAnxietyNervousnessStressMedication: '0',
  anxietyNervousnessStressMedication: '',
  // 其他疾病、长期药物治疗史
  otherDiseaseAndLongTreatment: '0',
  otherDiseaseAndLongTreatmentIndicate: '',
  isOtherDiseaseAndLongTreatmentMedication: '0',
  otherDiseaseAndLongTreatmentMedication: ''
}

// 患者类型的id
const patientClassifyId = ref('')

/**
 * 监听患者类型的id
 */
watch(
  () => patientClassifyId.value,
  async (newVal) => {
    if (newVal === null || newVal === undefined) {
      return
    }
    // 发送请求更新患者类型
    await patientUpdatePatientClassifyAPI(
      patientInfo.value.id,
      newVal
    )
    // 提示成功
    // ElMessage.success('修改患者类型成功')
  }
)

/**
 * 处理后端返回的记录列表
 */
const handleRecordList = async () => {
  const patientId = {
    patientId: patientInfo.value.id
  }
  // 根据id获取记录
  const recordResult =
    await planGetRecordInfoService(patientId)
  recordList.value = recordResult.data.data

  // 处理recordList数据
  // !!!! Promise.all 不能使用 forEach 遍历数组，否则会导致顺序错乱
  // !!!! Promise.all 使用这个方法可以并行执行多个异步请求，提高效率
  // !!!! 使用 Promise.all 来等待所有的异步操作完成后再进行后续操作
  await Promise.all(
    recordList.value.map(async (item, index) => {
      // 如果recordList中的statue为0表示初诊，则将其title设置为初诊
      if (item.statue === 0) {
        item.title = '初诊'
      }
      // 其他情况，title设置为复诊1、2、3...
      else {
        item.title = `复诊${index}`
      }
      // 确保每一项都有 name 属性
      item.name = `tab-${index}`
      const recordId = {
        recordId: item.id
      }
      // 获取 mouthImages
      const mouthImagesResult =
        await planGetMouthImagesService(recordId)

      // 编辑 item 的 mouthImage, 后端传递的是集合转换为string的信息, 前端需要转换为数组
      if (mouthImagesResult.data.data) {
        item.mouthImages = mouthImagesResult.data.data
      }
      // 为每个recordList中的patientHistory和systemicDiseaseRecord属性获取对应的值
      // 获取指定病人id和记录id的病史
      const patientHistoryResult =
        await patientGetPatientHistoryService(
          patientInfo.value.id,
          item.id
        )
      item.patientHistory = patientHistoryResult.data.data

      item.patientId = patientInfo.value.id

      // 获取指定病人id和记录id的全身状况记录
      const systemicDiseaseResult =
        await patientGetPatientSystemicDisease(
          patientInfo.value.id,
          item.id
        )
      item.systemicDiseaseRecord =
        systemicDiseaseResult.data.data

      // 获取指定病人id和记录id的治疗计划
      const treatmentPlanResult =
        await planGetTreatmentPlanService(
          patientInfo.value.id,
          item.id
        )
      item.treatmentPlan = treatmentPlanResult.data.data
    })
  )
}

/**
 * 设置新建选项卡的默认信息
 */
const setNewTabDefaultInfo = () => {
  // 设置recordDate为未知
  recordDate.value = '未知'
  // 将currentRecord设置为defalutRecord
  currentRecord.value = { ...defalutRecord }
  // 设置patientHistory为默认值
  patientHistory.value = { ...defaultDiseaseHistory }
  // 设置systemicDisease为默认值
  systemicDisease.value = {
    ...defaultSystemicDiseaseRecord
  }
  treatmentPlanData.value = {}
  // 设置showButton为false
  showSubmitButton.value = true
  showPatientInfoButton.value = false
}

/**
 * 设置已有信息标签页的按钮状态
 */
const setOldTabButtonStatus = () => {
  showSubmitButton.value = false
  showPatientInfoButton.value = true
}

// 设置跳转到newTab标签页数据的方法
const handleGoToNewTab = () => {
  // 将currentRecord设置为recordList中newTab的数据
  currentRecord.value = recordList.value.find(
    (item) => item.name === 'newTab'
  )

  treatmentPlanData.value =
    currentRecord.value.treatmentPlan

  // 获取患者病史, 新建选项卡的病史
  patientHistory.value = currentRecord.value.patientHistory

  // 获取全身状况记录, 新建选项卡的全身状况记录
  systemicDisease.value =
    currentRecord.value.systemicDiseaseRecord
  // 设置recordDate为未知
  recordDate.value = '未知'
  // 设置currentTabName为newTab
  currentTabName.value = 'newTab'
  // 设置按钮状态
  showPatientInfoButton.value = false
  showSubmitButton.value = true
}

// 页面加载完成后操作
onMounted(async () => {
  const patientId = ref()
  // 获取患者id
  patientId.value = history.state.patientId
  // 判断patientId是否存在
  if (patientId.value) {
    // 发送请求获取患者信息
    const result = await patientGetPatientInfoService(
      patientId.value
    )
    patientInfo.value = result.data.data

    // 设置患者类型
    patientClassifyId.value =
      patientInfo.value.patientClassifyId

    // 处理记录列表
    await handleRecordList(patientInfo.value.id)

    // 设置新建选项卡的默认信息
    setNewTabDefaultInfo()

    // 新建一个el-tab-pane
    const newTab = {
      name: 'newTab',
      title: '新增记录',
      statue:
        recordList.value.length > 0
          ? recordList.value[recordList.value.length - 1]
              .statue + 1
          : 0,

      mainComplaint: '',
      currentHistory: '',
      patientHistory: defaultDiseaseHistory,
      systemicDiseaseRecord: {},
      treatmentPlan: {}
    }

    recordList.value.push(newTab)

    // 跳转到新增记录选项卡
    handleGoToNewTab()

    // editableTabsValue 表示跳转到新建选项卡中
    editableTabsValue.value = newTab.name
  }
})

/**
 * 新增记录
 */
const addRecord = () => {
  // 判断集合内是否存在新增记录选项卡
  const newTab = recordList.value.find(
    (item) => item.name === 'newTab'
  )
  if (newTab) {
    handleGoToNewTab()

    // 跳转到新增记录选项卡
    editableTabsValue.value = newTab.name

    return
  }
  // 新增记录
  const newRecord = {
    name: 'newTab',
    title: '新增记录',
    statue:
      recordList.value.length > 0
        ? recordList.value[recordList.value.length - 1]
            .statue + 1
        : 0,

    mainComplaint: '',
    currentHistory: '',
    patientHistory: {
      pastHistory: '',
      personalHistory: '',
      familyHistory: ''
    },
    systemicDiseaseRecord: defaultSystemicDiseaseRecord,
    treatmentPlan: {}
  }

  recordList.value.push(newRecord)
  // editableTabsValue 表示跳转到新建选项卡中
  editableTabsValue.value = newRecord.name

  // 跳转到新增记录选项卡
  handleGoToNewTab()

  // 提示新增记录成功
  ElMessage({
    type: 'success',
    message: '新增记录成功'
  })
}

/**
 * 提交选项卡
 */
const submitTab = async () => {
  // 提示是否新增一条诊断记录
  ElMessageBox.confirm('是否新增一条诊断记录？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 获取数组中最后一个记录的数据
    const lastRecord =
      recordList.value[recordList.value.length - 1]
    lastRecord.mainComplaint =
      currentRecord.value.mainComplaint
    lastRecord.currentHistory =
      currentRecord.value.currentHistory

    // 设置patientId
    lastRecord.patientId = patientInfo.value.id

    // 设置recordDate
    const recordData = {
      diagnosticRecord: {
        mainComplaint: lastRecord.mainComplaint,
        currentHistory: lastRecord.currentHistory,
        patientId: lastRecord.patientId,
        statue: lastRecord.statue,
        imageCheck: lastRecord.imageCheck
      },
      mouthImages: lastRecord.mouthImages,
      diseaseHistory: lastRecord.patientHistory,
      systemicDiseaseRecord:
        lastRecord.systemicDiseaseRecord,
      treatmentPlan: lastRecord.treatmentPlan
    }

    // 发送请求
    await planAddRecordService(recordData)

    ElMessage({
      type: 'success',
      message: '新诊断记录已添加'
    })

    await handleRecordList()

    // 设置currentRecord为最后一个记录
    currentRecord.value =
      recordList.value[recordList.value.length - 1]
    systemicDisease.value =
      currentRecord.value.systemicDiseaseRecord

    treatmentPlanData.value =
      currentRecord.value.treatmentPlan

    // 跳转到最后一个选项卡
    editableTabsValue.value =
      recordList.value[recordList.value.length - 1].name

    // 设置当前标签页为currentRecord
    currentTabName.value = editableTabsValue.value

    // 设置showButton为false
    showSubmitButton.value = false
    showPatientInfoButton.value = true

    // 设置recordDate为currentRecord的recordDate
    // 2024-07-25T14:34:29去掉T后面的时间
    recordDate.value = currentRecord.value.createTime.slice(
      0,
      10
    )
  })
}

// 显示提交按钮
const showSubmitButton = ref(false)
// 显示患者信息按钮
const showPatientInfoButton = ref(false)
// 记录日期
const recordDate = ref('')

/**
 * 标签页切换事件
 *
 */
const handeleChange = async (tabName) => {
  if (tabName === 'newTab') {
    // 数据库未存在的新增记录选项卡
    // 跳转到新增记录选项卡
    handleGoToNewTab()
    // 设置 editableTabsValue 为 tabName
    editableTabsValue.value = tabName
  } else {
    // 数据库已存在的记录选项卡
    // 将currentRecord设置为tabName对应的记录
    currentRecord.value = recordList.value.find(
      (item) => item.name === tabName
    )

    // 设置patientHistory为currentRecord的patientHistory
    patientHistory.value =
      currentRecord.value.patientHistory

    // 设置systemicDisease为currentRecord的systemicDiseaseRecord
    systemicDisease.value =
      currentRecord.value.systemicDiseaseRecord

    // 设置治疗计划
    treatmentPlanData.value =
      currentRecord.value.treatmentPlan

    // 设置currentTabName为tabName
    currentTabName.value = tabName

    // 设置 editableTabsValue 为 tabName
    editableTabsValue.value = tabName

    // 设置recordDate为currentRecord的recordDate, 2024-07-25T14:34:29去掉T后面的时间
    recordDate.value = currentRecord.value.createTime.slice(
      0,
      10
    )
    // 设置按钮状态
    setOldTabButtonStatus()
  }
}

/**
 * 删除选项卡
 * @param {*} targetName
 * @param {*} action
 */
const handleTabsEdit = async (targetName, action) => {
  if (action === 'remove') {
    // 删除新增记录选项卡
    if (targetName === 'newTab') {
      // 删除新增记录选项卡
      // 在集合中删除新增记录选项卡
      const index = recordList.value.findIndex(
        (item) => item.name === targetName
      )
      // 如果找到新增记录选项卡的索引
      if (index !== -1) {
        // 删除新增记录选项卡
        recordList.value.splice(index, 1)
        ElMessage({
          type: 'info',
          message: '新增记录已删除'
        })
      }
      // 跳转到最后一个选项卡
      if (recordList.value.length > 0) {
        editableTabsValue.value =
          recordList.value[recordList.value.length - 1].name
        // 设置patientHistory, systemicDisease, currentRecord, currentTabName, recordDate
        // 在集合中找到最后一个记录
        currentRecord.value =
          recordList.value[recordList.value.length - 1]
        // 设置patientHistory, systemicDisease, currentRecord, currentTabName, recordDate
        patientHistory.value =
          currentRecord.value.patientHistory
        systemicDisease.value =
          currentRecord.value.systemicDiseaseRecord
        currentTabName.value = editableTabsValue.value
        // 设置recordDate为currentRecord的recordDate
        // 2024-07-25T14:34:29去掉T后面的时间
        recordDate.value =
          currentRecord.value.createTime.slice(0, 10)
        // 设置按钮状态
        setOldTabButtonStatus()
      } else {
        editableTabsValue.value = ''
      }
    } else {
      // 删除已有记录选项卡
      // 弹窗确认是否删除
      ElMessageBox.confirm(
        '确定要删除这条记录吗？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        // 获取要删除的记录的 id
        const recordId = recordList.value.find(
          (item) => item.name === targetName
        ).id
        // 发送删除请求
        await planDeleteRecordService(recordId)
        // 删除成功后，从 recordList 中移除该选项卡
        const index = recordList.value.findIndex(
          (item) => item.name === targetName
        )
        recordList.value.splice(index, 1)
        ElMessage({
          type: 'success',
          message: '记录已删除'
        })

        // 跳转到最后一个选项卡
        if (recordList.value.length > 0) {
          editableTabsValue.value =
            recordList.value[
              recordList.value.length - 1
            ].name
          // 判断是否为新增记录

          if (
            recordList.value[recordList.value.length - 1]
              .name === 'newTab'
          ) {
            // 设置patientHistory, systemicDisease, currentRecord, currentTabName, recordDate
            // 在集合中找到最后一个记录
            currentRecord.value =
              recordList.value[recordList.value.length - 1]
            // 设置patientHistory, systemicDisease, currentRecord, currentTabName, recordDate
            patientHistory.value =
              currentRecord.value.patientHistory
            systemicDisease.value =
              currentRecord.value.systemicDiseaseRecord
            currentTabName.value = editableTabsValue.value
            // 设置recordDate为未知
            recordDate.value = '未知'
            // 设置按钮状态
            showSubmitButton.value = true
            showPatientInfoButton.value = false
          } else {
            // 不是新增记录选项卡
            // 设置patientHistory, systemicDisease, currentRecord, currentTabName, recordDate
            // 在集合中找到最后一个记录
            currentRecord.value =
              recordList.value[recordList.value.length - 1]
            // 设置patientHistory, systemicDisease, currentRecord, currentTabName, recordDate
            patientHistory.value =
              currentRecord.value.patientHistory
            systemicDisease.value =
              currentRecord.value.systemicDiseaseRecord
            currentTabName.value = editableTabsValue.value
            // 设置recordDate为currentRecord的recordDate
            // 2024-07-25T14:34:29去掉T后面的时间
            recordDate.value =
              currentRecord.value.createTime.slice(0, 10)
            // 设置按钮状态
            setOldTabButtonStatus()
          }
        }
      })
    }
  }
}

const updatePatientInfoDrawerRef = ref(null)
// 处理患者信息
const handlePatientInfo = () => {
  updatePatientInfoDrawerRef.value.open()
}

/**
 * 更新全身状况记录
 * @param {*} data
 */
const updateSystemicDiseaseFromFather = (data) => {
  // systemicDisease.value = data
  // 判断集合中是否有新增记录选项卡
  const newTab = recordList.value.find(
    (item) => item.name === 'newTab'
  )
  // 如果有新增记录选项卡, 且当前tabName为新增记录选项卡, 则更新新增记录选项卡的systemicDiseaseRecord
  if (newTab && currentTabName.value === 'newTab') {
    // 设置集合中新增记录选项卡的systemicDiseaseRecord
    recordList.value.find(
      (item) => item.name === 'newTab'
    ).systemicDiseaseRecord = data
  }
}

/**
 * 更新病史记录
 * @param {*} data
 */
const updateDiseaseHistoryFromFather = (data) => {
  patientHistory.value = data
}

/**
 * 更新治疗计划
 */
const updatePlanForm = (data) => {
  treatmentPlanData.value = data
}

/**
 * 更新当前记录, 主述和现病史
 * @param {*} data
 */
const updateCurrentRecordFromFather = (data) => {
  currentRecord.value = data
}

/**
 * 处理子组件传递的影像学检查图片
 * @param {*} data
 */
const handleUpdateImageCheck = (data) => {
  recordList.value.find(
    (item) => item.name === 'newTab'
  ).imageCheck = data
}

/**
 * 处理子组件传递的口内照片
 */
const handleUpdateMouthImage = (data) => {
  const tempList = []
  // 将 data 的 url 数据使用forEach方法赋值给 tempList
  data.forEach((item) => {
    tempList.push(item.url)
  })
  // 将图片储存到集合中的新建记录选项卡中
  recordList.value.find(
    (item) => item.name === 'newTab'
  ).mouthImages = tempList
}

/**
 * 刷新页面
 */
const handleRefresh = async () => {
  // 储存当前的 currentRecord
  const tempCurrentRecord = currentRecord.value
  // 储存当前的 新建记录选项卡
  const tempNewTab = recordList.value.find(
    (item) => item.name === 'newTab'
  )

  await handleRecordList()
  if (tempNewTab) {
    // 添加到 recordList 中
    recordList.value.push(tempNewTab)
  }

  // 设置tabName为tempCurrentRecord的name
  currentTabName.value = tempCurrentRecord.name
  // 在计划中找到和 tempCurrentRecord 相同名字的记录
  currentRecord.value = recordList.value.find(
    (item) => item.name === tempCurrentRecord.name
  )
  // 设置病史记录
  patientHistory.value = currentRecord.value.patientHistory
  // 设置全身病理记录
  systemicDisease.value =
    currentRecord.value.systemicDiseaseRecord

  // 设置治疗计划
  treatmentPlanData.value =
    currentRecord.value.treatmentPlan

  // 设置标签页为tempCurrentRecord的name
  editableTabsValue.value = tempCurrentRecord.name
}

/**
 * 跳转到患者列表页面
 */
const toPatientPage = () => {
  router.push('/patient/patientManage')
}
</script>

<template>
  <PageContainer title="方案设计">
    <!-- 顶部按钮 -->
    <template #extra>
      <el-button
        :disabled="!showPatientInfoButton"
        type="warning"
        @click="handlePatientInfo()"
      >
        患者信息
      </el-button>
    </template>
    <!-- 更新患者信息弹窗 -->
    <UpdatePatientInfoDrawer
      :currentRecord="currentRecord"
      :patient="patientInfo"
      ref="updatePatientInfoDrawerRef"
      @refresh="handleRefresh"
    ></UpdatePatientInfoDrawer>

    <!-- 头部患者信息 -->
    <el-row class="top-patient-info">
      <el-col :span="3">
        <el-tag size="large">患者姓名</el-tag>&nbsp;:&nbsp;
        <el-link type="info" underline="true"
          >{{ patientInfo.name || '未知' }}
        </el-link>
      </el-col>
      <el-col :span="3">
        <el-tag size="large">性别</el-tag>&nbsp;:&nbsp;
        <el-link
          v-if="patientInfo.gender"
          type="info"
          underline="true"
        >
          {{ patientInfo.gender === '1' ? '男' : '女' }}
        </el-link>
        <el-link v-else type="info" underline="true"
          >未知</el-link
        >
      </el-col>
      <el-col :span="3">
        <el-tag size="large">年龄:</el-tag>&nbsp;:&nbsp;
        <el-link type="info" underline="true">
          {{ patientInfo.age || '未知' }}
        </el-link>
      </el-col>

      <el-col :span="4">
        <el-tag size="large">诊断日期:</el-tag>&nbsp;:&nbsp;
        <el-link type="info" underline="true">
          {{ recordDate || '未知' }}
        </el-link>
      </el-col>

      <el-col :span="4">
        <el-tag size="large">患者类型:</el-tag>&nbsp;:&nbsp;

        <PatientClassifySelect
          v-model="patientClassifyId"
          placeholder="选择患者类型"
          :style="{ width: '140px' }"
        ></PatientClassifySelect>
      </el-col>

      <div class="button-container">
        <el-button
          v-if="showSubmitButton"
          type="primary"
          @click="submitTab(editableTabsValue)"
          >提交记录
        </el-button>
        <el-button
          v-else-if="!showSubmitButton && patientInfo.id"
          type="success"
          @click="addRecord(editableTabsValue)"
          >新建记录
        </el-button>
      </div>
    </el-row>

    <!-- 主体内容 -->
    <el-tabs
      type="border-card"
      class="tabs-container"
      @edit="handleTabsEdit"
      @tab-change="handeleChange"
      closable
      v-model="editableTabsValue"
      v-if="recordList.length > 0"
    >
      <el-tab-pane
        v-for="item in recordList"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <!-- 新增记录选项卡 -->
        <NewRecord
          v-if="item.name === 'newTab'"
          :systemicDiseaseFromFather="
            item.systemicDiseaseRecord
          "
          :diseaseHistoryFromFather="patientHistory"
          :currentRecordFromFather="currentRecord"
          :imageCheckFromFather="item.imageCheck"
          :mouthImagesFromFather="item.mouthImages"
          :planFormFromFather="treatmentPlanData"
          @updateSystemicDiseaseFromFather="
            updateSystemicDiseaseFromFather
          "
          @updateDiseaseHistoryFromFather="
            updateDiseaseHistoryFromFather
          "
          @updateCurrentRecordFromFather="
            updateCurrentRecordFromFather
          "
          @updateImageCheck="handleUpdateImageCheck"
          @updateMouthImage="handleUpdateMouthImage"
          @updatePlanFormFromFather="updatePlanForm"
        ></NewRecord>
        <!-- 已有记录选项卡 -->
        <!-- :mouthImages="item.mouthImages" -->
        <ExistRecord
          v-else-if="item.name !== 'newTab'"
          :patientId="item.patientId"
          :recordId="item.id"
          :mainComplaint="item.mainComplaint"
          :currentHistory="item.currentHistory"
          :patientHistory="patientHistory"
          :systemicDisease="systemicDisease"
          :imageCheck="item.imageCheck"
          :mouthImages="item.mouthImages"
          :treatmentPlan="treatmentPlanData"
        ></ExistRecord>
      </el-tab-pane>
    </el-tabs>

    <div v-else class="no-data-container">
      <h1>没有选择患者或没有数据</h1>
      <el-button
        :style="{ 'font-size': '20px' }"
        type="primary"
        @click="toPatientPage()"
        >前往患者列表选择患者
      </el-button>
    </div>
  </PageContainer>
</template>

<style lang="scss" scoped>
// 设置居中
.top-patient-info {
  .el-link {
    // 设置字体大小
    font-size: 16px;
  }

  .button-container {
    // 设置右边为起始位置
    margin-left: auto;
    // 设置按钮宽度
  }
}

.tabs-container {
  // 设置上边距
  margin-top: 10px;
  // 设置背景阴影
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  // 宽高
  height: 68vh;
  width: 100%;
}

.no-data-container {
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  // 设置行排列
  flex-direction: column;
  font-size: 40px;
  color: #999;
  // 设置外边框
  border: 3px solid #eee;
  // 设置边框圆角
  border-radius: 20px;
  // 设置上边距
  margin-top: 10px;
}
</style>
